<div class="da-list-wrap">
  <div class="da-content-banner">
    <d-breadcrumb>
      <d-breadcrumb-item><a routerLink="/">{{ 'product.breadcrumb.home' | translate }}</a></d-breadcrumb-item>
      <d-breadcrumb-item>采购台账</d-breadcrumb-item>
    </d-breadcrumb>
  </div>
  <div class="da-content-wrapper">
    <div class="da-list-container">
      <div class="da-list-header">
        <div class="d-input">
          <div class="inputIn">
            <input dTextInput style="width: 180px;" [error]="false" placeholder="订单号" class="me-2"
              [(ngModel)]="orderNo">
            <input dTextInput style="width: 180px;" [error]="false" placeholder="付款单号" class="me-2"
              [(ngModel)]="receiptNo">
            <input dTextInput style="width: 180px;" [error]="false" placeholder="供应商" class="me-2" 
            [(ngModel)]="customerName">
          </div>
          <div class="d-submit">
            <d-button id="primaryBtn" (click)="search()"><i class="icon icon-filter-o me-2"></i>查询</d-button>
            <d-button bsStyle="common" (click)="reset()"> <i class="icon icon-refresh me-2"></i>重置</d-button>
          </div>
        </div>
      </div>
      <div class="list-content">
        <d-data-table [dataSource]="filteredData" [lazy]="true" [scrollable]="true" [fixHeader]="true"
          [tableWidthConfig]="tableWidthConfig" [tableOverflowType]="'auto'" [resizeable]="true">
          <thead dTableHead>
            <tr dTableRow>
              <th dHeadCell [fixedLeft]="'0px'">
                <span>操作</span>
              </th>
              <th dHeadCell>
                <span>打印</span>
              </th>
              <th dHeadCell *ngFor="let colOption of dataTableOptions.columns" [title]="colOption.header">
                {{colOption.header}}</th>
            </tr>
          </thead>
          <tbody dTableBody>
            <ng-template let-rowItem="rowItem" let-rowIndex="rowIndex" let-nestedIndex="nestedIndex">
              <tr dTableRow class="order-row" (click)="toggleRowItem(rowItem)">
                <!-- 1 操作（展开/收起箭头） -->
                <td dTableCell class="" [rowItem]="rowItem">
                  <span class="chevron "><span class="icon icon-chevron-right"
                      [class.rotated]="rowItem.display"></span></span>
                </td>
                <!-- 2 打印 -->
                <td dTableCell>
                  <a class="devui-link" (click)="printOrderRow(rowItem, $event)"><i class="icon icon-print me-1"></i>打印</a>
                </td>
                <!-- 2 单号 -->
                <td dTableCell [rowItem]="rowItem"><span class="row-type type-order">订单</span><span
                    class="ml8">{{rowItem.purchaseOrderNum}}</span></td>
                <!-- 3 供应商 -->
                <td dTableCell [rowItem]="rowItem">{{rowItem.supplierName}}</td>
                <!-- 4 供应商简称 -->
                <td dTableCell [rowItem]="rowItem">{{rowItem.supplierShortName}}</td>
                <!-- 5 下单日期 -->
                <td dTableCell [rowItem]="rowItem">{{rowItem.orderDate}}</td>
                <!-- 6 交货日期 -->
                <td dTableCell [rowItem]="rowItem">{{rowItem.deliveryDate}}</td>
                <!-- 7 订单金额 -->
                <td dTableCell [rowItem]="rowItem">{{rowItem.totalAmountWithTax | number:'1.0-0'}}</td>
                <!-- 8 应付金额 -->
                <td dTableCell [rowItem]="rowItem">{{rowItem.payableAmount | number:'1.0-0'}}</td>
                <!-- 9 实付金额 -->
                <td dTableCell [rowItem]="rowItem">{{rowItem.paidAmount | number:'1.0-0'}}</td>
                <!-- 10 未付金额 -->
                <td dTableCell [rowItem]="rowItem">{{rowItem.unpaidAmount | number:'1.0-0'}}</td>
                <!-- 11 状态 -->
                <td dTableCell [rowItem]="rowItem">
                  <d-badge [showDot]="true" [status]="rowItem.status==='审核通过' ? 'success' : 'warning'"></d-badge> <span
                    class="status-text">{{rowItem.status}}</span>
                </td>
              </tr>
              <ng-container *ngIf="rowItem.display">
                <tr *ngFor="let item of rowItem.payments; let index = index;" class="payment-row">
                  <!-- 1 操作（付款单标签） -->
                  <td dTableCell [rowItem]="item"><span class="devui-link me-2"
                      (click)="detail(item, rowItem)">付款单</span></td>
                  <!-- 2 打印 -->
                  <td dTableCell>
                    <a class="devui-link" (click)="printPaymentRow(item, rowItem, $event)"><i class="icon icon-print me-1"></i>打印</a>
                  </td>
                  <!-- 2 单号（付款单号） -->
                  <td dTableCell [rowItem]="item"><span class="row-type type-payment">付款</span><span class="ml8"
                      dTooltip [content]="(item.remark || '') + ' ' + item.paymentNum"><i class="icon icon-receipt"></i>
                      {{item.paymentNum}}</span></td>
                  <!-- 3 供应商 -->
                  <td dTableCell>{{rowItem.supplierName}}</td>
                  <!-- 4 供应商简称 -->
                  <td dTableCell>{{rowItem.supplierShortName}}</td>
                  <!-- 5 下单日期（用付款日期替代） -->
                  <td dTableCell>{{item.paymentDate | date:'yyyy-MM-dd HH:mm'}}</td>
                  <!-- 6 交货日期（沿用订单） -->
                  <td dTableCell>{{rowItem.deliveryDate}}</td>
                  <!-- 7 订单金额（沿用订单含税金额） -->
                  <td dTableCell>{{rowItem.totalAmountWithTax | number:'1.0-0'}}</td>
                  <!-- 8 应付金额（沿用订单应付） -->
                  <td dTableCell>{{rowItem.payableAmount | number:'1.0-0'}}</td>
                  <!-- 9 实付金额（本笔） -->
                  <td dTableCell>{{item.actualAmount | number:'1.0-0'}}</td>
                  <!-- 10 未付金额（到本笔后的剩余） -->
                  <td dTableCell>{{remainingAfter(rowItem, index) | number:'1.0-0'}}</td>
                  <!-- 11 状态 -->
                  <td dTableCell>
                    <d-badge [showDot]="true" [status]="item.isConfirmed ? 'success' : 'warning'"></d-badge> <span
                      class="status-text">{{item.status}}</span>
                  </td>
                </tr>
                <tr class="summary-row" [class.completed]="groupCompleted(rowItem)">
                  <td dTableCell [fixedLeft]="'0px'"><strong>汇总</strong></td>
                  <td dTableCell></td>
                  <td dTableCell [attr.colspan]="10">
                    付款笔数：<b>{{rowItem.payments?.length || 0}}</b>
                    ｜ 付款金额：<b>{{sumPaymentActual(rowItem.payments) | number:'1.0-0'}}</b>
                    ｜ 剩余未付：<b>{{groupRemaining(rowItem) | number:'1.0-0'}}</b>
                    ｜ 完成：
                    <b>
                      <span *ngIf="groupCompleted(rowItem); else notDone">已完成</span>
                      <ng-template #notDone>未完成</ng-template>
                    </b>
                  </td>
                </tr>
              </ng-container>
            </ng-template>
          </tbody>
        </d-data-table>
      </div>
      <div class="page-footer">
        <div>
          <p>共 <span class="underline">{{pager.total}}</span>条</p>
        </div>
        <d-pagination [size]="'sm'" [canViewTotal]="true" [canChangePageSize]="true" [canJumpPage]="true" [maxItems]="5"
          [total]="pager.total" [pageSizeOptions]="pageSizeOptions" [(pageSize)]="pager.pageSize"
          [(pageIndex)]="pager.pageIndex" (pageIndexChange)="pageIndexChange($event)"
          (pageSizeChange)="pageSizeChange($event)">
        </d-pagination>
      </div>
    </div>
  </div>
</div>
